<template>
  <el-row id="usermanage-box">
    <el-row id="breadcrumb-box">
        <el-breadcrumb separator="/" id="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item><a id="userbreadcrumb">用户管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>所有用户</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
    <el-table
      id="user-table"
      :data="userData"
      style="width: 100%"
      height="470"
      :header-cell-style="{ background: '#fafafa' }"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column
        id="fold-column-box"
        type="expand"
        width="70"
        label="查看"
      >
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="userId">
              <span>{{ props.row.userId }}</span>
            </el-form-item>
            <el-form-item label="openId">
              <span>{{ props.row.openId }}</span>
            </el-form-item> 
            <el-form-item label="用户名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{ props.row.mail }}</span>
            </el-form-item>
            <el-form-item label="电话号码">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
          </el-form>
        </template>

      </el-table-column>
      
        <el-table-column label="序号" type="index" width="240">
         <template slot-scope="scope">
            <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="360">
      </el-table-column>
      <el-table-column prop="mail" label="邮箱" width="240">
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="240">
      </el-table-column>


    </el-table>
    <el-row id="pagination-box">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        layout="total,prev, pager, next "
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </el-row>



</el-row>



</template>
<script>
export default {
  name: "UserManage",
  data(){
    return{
      pageNum: 1 ,
      pageSize: 5 ,
      total: 0 ,
      alluserData:[],
      userData:[],
    }
  },
  created(){
    this.axios.get("/wechatuser")
      .then(response => {
        if(response.status == 200){
            this.alluserData = response.data.data;
            this.userData=[];
            this.pageNum=1;
            this.getTabelData();      
        }
        console.log(this.problemData)
        console.log(this.courseNameValue)
    }).catch(error => alert(error));
  }, 
  methods: {
      //分页
      getTabelData() {
        //allData为全部数据
        if (this.alluserData) {
        this.userData = this.alluserData.slice(
          (this.pageNum - 1) * this.pageSize,
          this.pageNum * this.pageSize
        );
        this.total=this.alluserData.length}
      },
      // 分页序号
      getIndex($index) {
        return (
          (this.pageNum - 1) * this.pageSize + $index + 1
        );
      },
      handleSizeChange(pageSize) {
        this.pageSize=pageSize,
        this.getTabelData()
      },
      handleCurrentChange(pageNum) {
        this.pageNum=pageNum,
        this.getTabelData()
      }
  }
};
</script>
<style scoped>
/* 自定义的样式 */
#usermanage-box{
  padding-left: 80px;
  padding-right: 40px;
  padding-top: 20px;
  background-color: #f6fafb !important;
  
  height: 680px;
  /* border: 1px solid black; */
}
/* #braed-box{
  margin-top:10px;
} */
#courseName-box,#userbreadcrumb{
  font-weight: 700;
  color: #1a2749!important;
}
</style>

<style>

#breadcrumb-box {
  width: 400px;
  height: 40px !important;
}
/* 修改element-ui的样式 */
</style>